<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>组件使用细节</title>
  <script src="../static/vue.js"></script>
</head>
<body>

<div id="app">
  <counter ref="one" @change="handleChange"></counter>
  <counter ref="two" @change="handleChange"></counter>
  <div>{{total}}</div>
  <div ref="hello"
       @click="handleClick">hello world
  </div>
  <table>
    <tbody>
    <tr is="row"></tr>
    <tr is="row"></tr>
    <tr is="row"></tr>
    </tbody>
  </table>
  <ul>
    <li is="row"></li>
  </ul>
</div>

<script>
  Vue.component('row', {
    data: function () {
      return {
        content: 'this is a row'
      }
    },
    template: '<tr> <td>{{content}}</td></tr>'
  })

  Vue.component('counter', {
    template: '<div @click="handleClick">{{number}}</div>',
    data: function () {
      return {
        number: 0,
      }
    },
    methods: {
      handleClick: function () {
        this.number++;
        this.$emit('change')//子组件向父组件传递值
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data: {
      total: 0
    },
    methods: {
      handleClick: function () {
        console.log(this.$refs.hello.innerHTML)
      },
      handleChange: function () {
        this.total = this.$refs.one.number + this.$refs.two.number
      }
    }
  })
</script>
</body>
</html>
